<template>
    <div class="tabs">
        <div class="tabs-header">
            <div class="bar">
                <div class="block">
                    <div :class="['item', 'passenger', activeTab == 'passenger' ? 'on' : '']" @click="onTab('passenger')">
                        <p>旅检预警总人数</p>
                        <b>500</b>
                        <span>人</span>
                    </div>
                    <div :class="['item', 'mail', activeTab == 'mail' ? 'on' : '']" @click="onTab('mail')">
                        <p>邮件预警总人数</p>
                        <b>500</b>
                        <span>人</span>
                    </div>
                    <div :class="['item', 'fast', activeTab == 'fast' ? 'on' : '']" @click="onTab('fast')">
                        <p>快件预警总人数</p>
                        <b>500</b>
                        <span>人</span>
                    </div>
                </div>
            </div>
            <div class="bar">
                <div class="block">
                    <div :class="['item', 'business', activeTab == 'business' ? 'on' : '']" @click="onTab('business')">
                        <p>跨境电商预警总人数</p>
                        <b>500</b>
                        <span>人</span>
                    </div>
                    <div :class="['item', 'leave', activeTab == 'leave' ? 'on' : '']" @click="onTab('leave')">
                        <p>离岛免税预警总人数</p>
                        <b>500</b>
                        <span>人</span>
                    </div>
                </div>

            </div>
        </div>
        <div class="tabs-search">
            <el-input v-model="input" style="width: 240px" placeholder="请输入姓名或者身份证号码" />
            <div class="btn" @click="onSearch">
                <el-divider direction="vertical" />
                <img src="@/assets/large-screen/icon-search.png" alt="搜索" />
            </div>
        </div>
        <div class="tabs-content">
            <MapBusiness v-show="activeTab == 'business'"></MapBusiness>
            <MapFast v-show="activeTab == 'fast'"></MapFast>
            <MapLeave v-show="activeTab == 'leave'"></MapLeave>
            <MapMail v-show="activeTab == 'mail'"></MapMail>
            <MapPassenger v-show="activeTab == 'passenger'"></MapPassenger>
        </div>
    </div>

    <!-- 弹窗 -->
    <PersonDialog ref="personDialog" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import MapBusiness from './MapBusiness.vue'
import MapFast from './MapFast.vue'
import MapMail from './MapMail.vue'
import MapPassenger from './MapPassenger.vue'
import MapLeave from './MapLeave.vue'
import PersonDialog from '../dialog/PersonDialog.vue'
import { ElMessage } from 'element-plus';
const activeTab = ref('passenger')
const input = ref('')
const personDialog = ref()

function onTab(tab: string) {
    activeTab.value = tab;
}
function onSearch(){
    if(input.value) {
        personDialog.value.openByView(input.value);
    }
    else{
        ElMessage.warning('请输入姓名或者身份证号码');
    }
}
</script>


<style lang="less" scoped>
.tabs {
    .el-input {
        --el-input-bg-color: #d8eaff;
        --el-border-color-hover: var(--el-color-primary-light-3);
        --el-border-color: #3E5971;
        --el-input-placeholder-color: #3E5971;
    }
    .el-divider--vertical{
        margin-top: -10px;
        --el-border-color:#3E5971;
    }
}
</style>